---
title: Tailwind CSS Modal/Dialog - Components Library @David UI
description: Create beautiful modals with Tailwind CSS using David UI. It is ideal for creating engaging web or mobile interfaces, try now for free!
github: modal
---

<ScriptLoader />

<InfoBadge />

# Tailwind CSS Modal/Dialog 

David UI's Modal component offers a sleek and accessible way to display overlays for alerts, forms, or additional content. Styled with Tailwind CSS, it supports customizable headers and footers for a polished user experience.

Explore our responsive Modal component examples, styled with Tailwind CSS, ideal for creating engaging web or mobile interfaces.


---

## Basic Modal

This example showcases how to create a Tailwind CSS modal with a structured layout, including a header, dismiss button, and action buttons. 


<PreviewWithCode relativePath="modal/modal-demo.tsx" language="html" />

---

## Modal Sizes

David UI's dialog component is versatile and it is coming with multiple size options (`xs`, `sm`, `md`, `lg`, `xl`, `screen`). Each size adapts seamlessly to fit diverse content requirements, ensuring responsiveness and consistent styling across applications.

<PreviewWithCode relativePath="modal/modal-sizes.tsx" language="html" />

---

## Modal with Form

Try this example of the Dialog component for creating a sign-in form. Includes input fields for email and password, a "Remember Me" checkbox, and actionable buttons.

<PreviewWithCode relativePath="modal/modal-with-form.tsx" language="html" />

---

## Modal with Image

A visually rich example of a Dialog component integrated with images. Includes features like a user profile section, image display, action buttons for downloading or sharing, and metrics for views and downloads. Ideal for image galleries or media-rich applications.


<PreviewWithCode relativePath="modal/modal-with-image.tsx" language="html" />

---

## Web 3 Modal

Here is an example of how to create a wallet connection dialog for Web3 applications. It features popular wallet options like MetaMask, Coinbase, and Trust Wallet, presented with clear actions and helpful contextual information for users new to Ethereum wallets.

<PreviewWithCode relativePath="modal/modal-web3.tsx" language="html" />

---

## Long Modal

This example showcases a Dialog component designed for handling large amounts of text content. Ideal for lengthy messages, agreements, or detailed information. Includes a scrollable area for improved usability, along with dismiss and confirmation buttons.

<PreviewWithCode relativePath="modal/modal-long.tsx" language="html" />

---

## Message Modal

A Dialog component tailored for sending messages. Includes input fields for username and message, providing a clean interface for direct communication. Perfect for chat or messaging functionalities.

<PreviewWithCode relativePath="modal/modal-message.tsx" language="html" />

---

## Modal Notification

A focused example of a notification-style Dialog component. Designed to grab the user's attention, it combines an icon, concise messaging, and actionable buttons to deliver critical information or alerts effectively.

<PreviewWithCode relativePath="modal/modal-notification.tsx" language="html" />

---

## Required Script

The Modal component in david-ai requires JavaScript to handle the modal functionality. The library provides smooth transitions and toggle behavior through data attributes.

### Installation

To use the Modal component in your project, you first need to install the `david-ai` library via npm:

<CodePreviewTailwindClasses codeSnippet={`npm install david-ai`}/>

### Basic Usage

<CodePreviewTailwindClasses codeSnippet={
`import { initModal } from 'david-ai';

// Initialize modal functionality
initModal();
`
}/>

### Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initModal:

<CodePreviewTailwindClasses codeSnippet={
`import * as DavidAI from 'david-ai';

// Initialize modal functionality
DavidAI.initModal();
`
}/>

### Using with CDN
You can include david-ai via a CDN and initialize modal functionality globally in the browser. Add the following script to your HTML file:

<CodePreviewTailwindClasses codeSnippet={`<script src="https://cdn.jsdelivr.net/gh/creativetimofficial/david-ai@1.0.4/packages/dist/david-ai.min.js" defer></script>`}/>

### HTML Code Example

<CodePreviewTailwindClasses codeSnippet={
`<div class="flex justify-center">
  <button type="button" data-dui-toggle="modal" data-dui-target="#exampleModal" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">
    Open
  </button>
  <div class="fixed inset-0 bg-stone-800 bg-opacity-75 flex justify-center items-center opacity-0 pointer-events-none transition-opacity duration-300 ease-out z-[9999]" id="exampleModal" aria-hidden="true">
    <div class="bg-white rounded-lg w-1/3 scale-95 transition-transform duration-300 ease-out">
      <div class="border-b border-stone-200 p-4 flex justify-between items-center">
        <h1 class="text-lg text-stone-800 font-semibold">Modal title</h1>
        <button type="button" data-dui-dismiss="modal" aria-label="Close" class="text-stone-500 hover:text-stone-800">&times;</button>
      </div>
      <div class="p-4 text-stone-500">
        Content for the first modal.
      </div>
      <div class="border-t border-stone-200 p-4 flex justify-end gap-2">
        <button type="button" data-dui-dismiss="modal" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">Close</button>
        <button type="button" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-blue-500 hover:bg-info-light relative bg-gradient-to-b from-blue-500 to-blue-600 border-blue-600 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-blue-600 hover:to-blue-600 hover:border-blue-600 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.35),inset_0_-2px_0px_rgba(0,0,0,0.18)] after:pointer-events-none transition antialiased">Save changes</button>
      </div>
    </div>
  </div>
</div>`
}/>
